<template>
  <div class="login-container" :style="backgroundStyle">
    <div class="theme-switch">
      <el-radio-group v-model="currentTheme" size="small">
        <el-radio-button label="gradient">渐变</el-radio-button>
        <el-radio-button label="cool">冷色调</el-radio-button>
        <el-radio-button label="warm">暖色调</el-radio-button>
      </el-radio-group>
    </div>

    <div class="system-title" :class="titleColorClass">
      烟叶管理系统
    </div>

    <el-card class="login-card">
      <div slot="header" class="clearfix">
        <span>登录</span>
      </div>

      <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          label-width="0"
          class="login-form"
      >
        <el-form-item prop="username">
          <el-input
              v-model="loginForm.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              prefix-icon="el-icon-lock"
              :type="passwordType"
              placeholder="请输入密码"
              @keyup.enter.native="handleLogin"
          />
        </el-form-item>

        <el-form-item>
          <el-button
              :loading="loading"
              type="primary"
              class="login-button"
              @click="handleLogin"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 添加备案信息 -->
    <div class="beian-info">
      <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer">
        备案号：滇ICP备20002534号
      </a>
    </div>
  </div>
</template>

<script>
import { generateRoutes, formatRoutes } from '@/utils/routeUtils'
import { mainRoute } from '@/router'

export default {
  name: 'UserLogin',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      loginRules: {
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, message: '密码长度不能小于5位', trigger: 'blur'}
        ],
      },
      loading: false,
      passwordType: 'password',
      currentTheme: 'gradient',
      overlayOpacity: 0.7,
    }
  },
  computed: {
    backgroundStyle() {
      switch (this.currentTheme) {
        // 渐变
        case 'gradient':
          return {
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6B8DD6 100%)'
          }
        // 冷色调
        case 'cool':
          return {
            background: `linear-gradient(rgba(255, 255, 255, ${this.overlayOpacity}), rgba(255, 255, 255, ${this.overlayOpacity})), url(${require('@/assets/cold_back.webp')}) center/cover no-repeat`
          }
        // 暖色调
        case 'warm':
          return {
            background: `linear-gradient(rgba(255, 255, 255, ${this.overlayOpacity}), rgba(255, 255, 255, ${this.overlayOpacity})), url(${require('@/assets/warm_back.webp')}) center/cover no-repeat`
          }
        default:
          // 默认渐变
          return {
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6B8DD6 100%)'
          }
      }
    },
    titleColorClass() {
      switch (this.currentTheme) {
        case 'gradient':
          return 'title-light'
        case 'cool':
          return 'title-dark'
        case 'warm':
          return 'title-dark'
        default:
          return 'title-light'
      }
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          this.loading = true
          try {
            // 登录逻辑
            await this.$store.dispatch('login', this.loginForm)

            // 确保动态路由已添加
            if (!window.__hasAddedRoutes) {
              const accessRoutes = generateRoutes(this.$store.state.menus)
              mainRoute.children = formatRoutes(accessRoutes)
              this.$router.addRoute(mainRoute)
              window.__hasAddedRoutes = true
            }

            // 登录成功后跳转
            this.$router.push('/main/dashboard')
          } catch (error) {
            console.error('登录失败:', error)
            this.$message.error(error.message || '登录失败')
          } finally {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: background 0.5s ease;

  .beian-info {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    
    a {
      color: #909399;
      text-decoration: none;
      font-size: 14px;
      
      &:hover {
        color: #409EFF;
      }
    }
  }
}

.theme-switch {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  border-radius: 8px;
  backdrop-filter: blur(10px);

  :deep(.el-radio-button__inner) {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    color: #666;

    &:hover {
      color: #409EFF;
    }
  }

  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background: #409EFF;
    border-color: #409EFF;
    box-shadow: -1px 0 0 0 #409EFF;
    color: white;
  }
}

.system-title {
  position: absolute;
  top: 10%;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 40px;
  transition: color 0.3s ease;

  &.title-light {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  &.title-dark {
    color: #333;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
  }
}

.login-card {
  width: 400px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }
}

.login-card :deep(.el-card__header) {
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px 15px 0 0;

  span {
    font-size: 24px;
    font-weight: 500;
    color: #333;
    text-align: center;
    display: block;
  }
}

.login-form {
  padding: 20px;
}

.login-form .el-form-item {
  margin-bottom: 25px;
}

.login-form :deep(.el-input__inner) {
  height: 45px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;

  &:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
  }
}

.login-form :deep(.el-input__prefix) {
  left: 10px;
  color: #666;
}

.login-button {
  width: 100%;
  height: 45px;
  border-radius: 8px;
  font-size: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
  }

  &:active {
    transform: translateY(0);
  }
}
</style>